
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.fz(@px){
	.px2rem(font-size,@px);
}
body,html{
	background: #f2f2f2;
}

.content{
	.top{
		display: flex;
		border-bottom: 1px solid #c1c1c1;
		.left{
			.px2rem(width,80);
			.px2rem(height,80);
			.px2rem(padding-left,30);
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width: 60%;
			}
		}
		.right{
			flex: 1;
			.px2rem(padding-left,20);
			.px2rem(padding-right,35);
			display: flex;
			align-items: center;
			p{
				width: 100%;
				margin: auto 0;
				background: url(../images/you.png) no-repeat right center;
				background-size: 5.5%;
				.px2rem(font-size,24);
			}

		}
	}
	.bottomm{
		background: #fff;
		width: 90%;
		border: 1px solid #dcdcdc;
		box-sizing: border-box;
		border-radius: 6px;
		margin: 0 auto;
		.px2rem(margin-top,40);
		.total{
			.px2rem(font-size,28);
			.px2rem(padding-top,15);
			.px2rem(padding-bottom,15);
			.px2rem(padding-left,10);
			.px2rem(margin-bottom,35);
			border-bottom: 1px solid #dbdbdb;
		}
		.list{
			display: flex;
			dl{
				flex: 1;
				text-align: center;
				.px2rem(margin-bottom,25);
				dt{
					img{
						width: 65%;
					}
				}
				dd{
					.px2rem(font-size,24);
					.px2rem(padding,10);
				}
			}
		}
		.watch{
			border-top: 1px solid #c1c1c1;
			.chakan{
				.px2rem(padding,25);
				.px2rem(font-size,24);
				color: #71dbd6;
				display: flex;
				justify-content: space-between;
				align-items: center;
				img{
					width: 5%;
					height: 5%;
					transform: rotate(90deg);
				}
			}
		}
	}
}


.items{
	display: none;
	background: #fff;
	width: 90%;
	margin: 0 auto;
	.px2rem(margin-top,50);
	background: #f3f3f3;
	.item{
		border: 1px solid #dcdcdc;
		box-sizing: border-box;
		.px2rem(padding,20);
		.px2rem(margin-bottom,50);
		background: #fff;
		border-radius: 6px;
		img{
			width: 100%;
		}
		p{
			.px2rem(padding,10);
		}
	}
}